<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${ctx }/static/css/role.css" >
<title>角色管理</title>
<style type="text/css">
	#body{
		background-color:#A0DAF4;
		margin-left:30px;	
		position: relative;
	}
	#body .addRole{font-size:14px;padding:20px;background-color: #E5FFE0;z-index:100;position:absolute;left: 435px;top: 32px;
	    			width: 273px;text-align: center;color:292929;line-height: 30px;
	    			display: none;
	}
	#body .yincang{font-size:14px;padding:20px;background-color: #FFFBD8;z-index:100;position:absolute;left: 435px;top: 32px;
	    			width: 273px;text-align: center;color:292929;line-height: 30px;display: none;
	}
	#body .delete{font-size:14px;padding:20px;background-color: #FFFBD8;z-index:100;position:absolute;
					left: 435px;top: 32px; width: 273px;text-align: center;color:292929;line-height: 30px;	display: none;
	}
	#body .delete #OK{margin-right: 30px; width: 70px;}
	#body .delete #Cancel{margin-left: 30px;width: 70px;}
	#xinzeng{width: 100px;height:40px; margin: 15px; color:14px;}
	
</style>
</head>
<body>
	<form action="${ctx }/RoleManage/queryRole" id="fromdate">
		<input type="hidden" value="${rolelist }"  id="hide">
	</form>
	<div id="body">
		<p style="font-size: 11px;">系统管理 <span>\角色管理</span></p>
		<div id="neirong">
		<div class="addRole">
			<span>添加角色信息</span>
			<hr>
			<form id="hiddenform">
				角色名称:<input type="text" id="role"><br/>
				是否启用:<select id="selecttate">
					<option>启用</option>
					<option>不启用</option>
				</select>
				<input type="button" value="保存" id="save">
				<input type="button" value="取消" id="cancel">
			</form>
		</div>
		<div class="yincang">
			<span>修改角色信息</span>
			<hr>
			<form id="hiddenform">
				角色名称:<input type="text" id="hi"><br/>
				是否启用:<select id="select">
					<option>启用</option>
					<option>不启用</option>
				</select>
				<input type="button" value="保存" id="baocun">
				<input type="button" value="取消" id="quxiao">
			</form>
		</div>
		
		<div class="delete">
			<p>您确定要删除【<span></span>】这个角色吗?</p>
			<hr>
				<input type="button" value="OK" id="OK">
				<input type="button" value="Cancel" id="Cancel">
		</div>
		<input type="button"  value="新增" id="xinzeng">
		<div id="divtable">
				<table>
					<thead>
						<tr style="font-weight:bold;">
							<td >角色名称</td>
							<td>创建时间</td>
							<td>是否启用</td>
							<td>操作</td>
						</tr>
					</thead>
					<tbody id="tbody">
						
					
						<c:forEach items="${rolelist }" var="obj" varStatus="index">
							<tr>
								<td id="rolename">${obj.roleName }</td>
								<td><fmt:formatDate  value="${obj.createDate }" pattern="yyyy-MM-dd HH:mm:ss"/></td>
								<td id="state">${obj.state }</td>
								<td>
								<input type="hidden" value="${indx}" id="update">
									<a href="#" onclick="xiugai(this)" id="amend" >修改</a>|
									<a href="#" onclick="deletes(this)" id="delete">删除</a>
								</td>
							</tr>
						
						</c:forEach>
					</tbody>
				</table>
			</div>
		</div>
		
	</div>
	
	<script type="text/javascript" src="${ctx }/static/js/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(function(){
			//自动提交查询数据
			var hide=$("#hide").val();
			if(hide == ''){
				$("#fromdate").submit();
			}
			
		})
		
//添加角色=======================================================================
		$("#xinzeng").click(function(){
			$(".addRole").show();
			$(".delete").hide();
			$(".yincang").hide();
		})
		$("#save").click(function(){
			var role=$("#role").val();
			var selecttate=$("#selecttate").val();
			if(role == '' ){
				alert("角色名称不能为空!")
				return;
			}
			$.ajax({
				url:'${ctx}/RoleManage/addRoleData/'+role+"/"+selecttate,
				type:'post',
				dataType:'json',
				success:function(msg){
					alert(msg.name)
					window.location.reload(); //刷新本页面
				},
				error:function(){
					alert("请求出现问题了!")
				}
			})
			
		})
		$("#cancel").click(function(){
			$(".addRole").hide();
		})
//修改数据=======================================================================
		function xiugai(obj){
			$(".yincang").show();
			$(".addRole").hide();
			$(".delete").hide();
			//获取表单的信息
			var td_content=$(obj).parents("tr").children("td");//获取当前行中的所有值
			var content=td_content.eq(0).text(); //根据当前的td下标进行获取
			//隐藏的下拉列表
			var sdf=$("#hi").val(content);
		}
		//隐藏框准备提交
		$("#baocun").click(function(){
			var val=$("#hi").val()
			var select=$("#select").val();
			if(val != '' && select != ''){
				$.ajax({
					url:'${ctx}/RoleManage/updateRole/'+val+'/'+select,
					type:'post',
					datatype:'json',
					success:function(msg){
						alert(msg.name)
						window.location.reload(); //刷新本页面
					},
					error:function(){
						alert("请求出现问题了!")
					}
					
				})
			}else{
				alert("信息不能为空!")	
			}
			$(".yincang").hide();
		})
		$("#quxiao").click(function(){
			$(".yincang").hide();
		})
		
//=======================================================================		
		//删除数据
		function deletes(num){
			$(".delete").show();
			$(".yincang").hide();
			$(".addRole").hide();
			var td_content=$(num).parents("tr").children("td");//获取当前行中的所有值
			var content=td_content.eq(0).text(); //根据当前的td下标进行获取
			$(".delete p span").text(content);
			
		}
		//准备删除数据
		$("#OK").click(function(){
			var content=$(".delete p span").text();
			$.ajax({
				url:'${ctx}/RoleManage/deleteData/'+content,
				type:'post',
				dataType:'json',
				success:function(msg){
					alert(msg.name)
					window.location.reload(); //刷新本页面
				},
				error:function(){
					alert("请求出现问题了!")
				}
			})
			$(".delete").hide();
		})
		
		$("#Cancel").click(function(){
			$(".delete").hide();
		});
		
	</script>
</body>
</html>